import React, { useState, useEffect, useMemo } from 'react';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';
import { ScrollBoard } from '@jiaminghi/data-view-react';
import IconFont from '@/components/IconFont';
import moment from 'moment';

const Donedata = () => {
  const { data, loading } = useRequest(
    () => {
      return getFetch({ url: '/vehicle-api/monitor/handle_order', params: {} });
    },
    {
      debounceWait: 300,
      pollingInterval: 60000,
    },
  );

  let config = useMemo(() => {
    if (data?.data?.list) {
      return {
        header: ['处罚时间', '处罚内容'],
        headerBGC: 'rgba(30,79,140,0.5)',
        evenRowBGC: 'rgba(100,143,194,0.1)',
        oddRowBGC: 'rgba(255,255,255,0.1)',
        hoverPause: !(data?.data?.list && data?.data?.list.length < 7),
        data: data?.data?.list.map((it) => [
          it?.handle_time ? moment(it?.handle_time).format('YYYY-MM-DD HH:mm') : '-',
          it?.alarm_group_name,
        ]),
      };
    } else {
      return {};
    }
  }, [data?.data?.handled_num, data?.data?.not_handled_num]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
      <p style={{ color: '#fff', margin: '0px 0px 0px 0' }} className="spacebt">
        <div className="done">
          <div>
            <IconFont type="icon-wancheng" />
          </div>
          已处理
          <b style={{ fontSize: 16, color: '#2bbda8' }}>{data?.data?.handled_num}</b>个
        </div>

        <div className="undone">
          <div>
            <IconFont type="icon-weiwancheng" />
          </div>
          未处理
          <b style={{ fontSize: 16, color: '#ff4800' }}>{data?.data?.not_handled_num}</b>个
        </div>
      </p>
      <ScrollBoard
        config={config}
        style={{ flex: 1, marginTop: 12 }}
        onClick={(row) => {
          console.log(row);
        }}
      />
    </div>
  );
};

export default Donedata;
